<template>
  <div>
      <el-table
              :data="data"
              border
              style="width: 100%"
              :row-style="showTr" size="mini">
          <el-table-column v-for="(column, index) in columns" :key="column.dataIndex"
                           :label="column.text" align="center">
              <template slot-scope="scope">
                  <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
                  <button class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)" style="border:none;background:none;">
                      <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
                      <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
                  </button>
                  <span v-else-if="index===0" class="ms-tree-space" style="padding-left:6px;"></span>
                  <!--{{scope.row[column.dataIndex]}}-->

                  <span v-html="scope.row[column.dataIndex]"></span>
              </template>
          </el-table-column>
          <el-table-column label="操作" v-if="treeType === 'normal'" align="left" width="300px">
              <template slot-scope="scope">
                  <el-button @click="handleReviseL(scope.row)" type="primary" size="mini" plain>修改</el-button>

                  <el-button v-if="scope.row.level == 1" @click="addReviseL(scope.row)" type="success" size="mini" plain>添加分类</el-button>
                  <el-button v-else @click="handleReviseP(scope.row)" type="success" size="mini" plain>添加商品</el-button>

                  <el-button v-if="scope.row.level == 2" @click="handleDelete(scope.row)" type="danger" size="mini" plain>删除商品</el-button>

              </template>
          </el-table-column>
      </el-table>


  </div>
</template>
<script>
  import Utils from '../utils/index.js'
  export default {
    name: 'tree-grid',
    props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
      treeStructure: {
        type: Boolean,
        default: function () {
          return false
        }
      },
// 这是相应的字段展示
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
// 这是数据源
      dataSource: {
        type: Array,
        default: function () {
          return []
        }
      },
// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
      requestUrl: {
        type: String,
        default: function () {
          return ''
        }
      },
// 这个是是否展示操作列
      treeType: {
        type: String,
        default: function () {
          return 'normal'
        }
      },
// 是否默认展开所有树
      defaultExpandAll: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    data () {
      return {
        categoryFormVisible: true
      }
    },
    computed: {
    // 格式化数据源
      data: function () {
        let me = this
        if (me.treeStructure) {
          let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
          return data
        }
        return me.dataSource
      }
    },
    methods: {
      categoryFormSubmit () {

      },
    // 显示行
      showTr: function (row, index) {
        let show = false
        if (row.row.level == 1) {
          show = true
        }else {
          if (row.row._expanded) {
            show = true
          }else {
            show = false
          }
        }
        row._show = show
        return show ? '' : 'display:none;'
      },
    // 展开下级
      toggle: function (trIndex) {
        let me = this
        let record = me.data[trIndex]
        if (record._expanded) {
          record._expanded = false
          for (var i in record.children) {
            record.children[i]._expanded = false
          }
        }else {
          record._expanded = true
          for (var i in record.children) {
            record.children[i]._expanded = true
          }
        }

      },
    // 显示层级关系的空格和图标
      spaceIconShow (index) {
        let me = this
        if (me.treeStructure && index === 0) {
          return true
        }
        return false
      },
    // 点击展开和关闭的时候，图标的切换
      toggleIconShow (index, record) {
        let me = this
        if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
          return true
        }
        return false
      },
      //修改分类
      handleReviseL (id) {
        this.$store.dispatch("set_category", id)
        this.$emit('transferFormVisibleIs', this.categoryFormVisible)

        /*this.categoryFormVisible = true
        this.categoryFormTitle = '添加分类'
        this.categoryDisabled = false*/
      },
      //添加分类
      addReviseL (id) {
        this.$store.dispatch("set_category", id)
        this.$emit('tarnsAddReviseFormIs', this.categoryFormVisible)
      },
      //修改商品
      handleReviseP (id) {
        this.$store.dispatch("set_category", id)
        this.$router.push('/add_category');
      },
      //删除
      handleDelete (id) {
        this.$store.dispatch("set_category", id)
        this.$router.push('/remove_category');
      }
    }
  }
</script>
<style>
  .ms-tree-space{position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;}
  .ms-tree-space::before{content: ""}
  table td{
    line-height: 26px;
  }
</style>
